<template>
  <el-popover width="240px">
    <template #reference>
      <default-bar focus-text :name :value="text" @value-change="(v)=>{this.commit(v,['text'])}"></default-bar>
    </template>
    非必要请勿直接修改，会切换到手动模式，请使用下方按钮修改，如果这个栏位卡住（切换到了手动模式），就把这个栏位全删掉，就会切换到自动模式
  </el-popover>
  <el-row>
    <el-col :span="4">
      <el-button :color="localValue.fire?'#cc5500':''"
                 @click="()=>{if(isKp){this.toggleClass('fire');this.$emit('classToggle','fire')}}"
                 style="width: 100%">火+
      </el-button>
    </el-col>
    <el-col :span="4">
      <el-button :color="localValue.reverseFire?'#5d5b5b':''"
                 @click="()=>{if(isKp){this.toggleClass('reverseFire');this.$emit('classToggle','reverseFire')}}"
                 style="width: 100%">火-
      </el-button>
    </el-col>
    <el-col :span="4">
      <el-button :color="localValue.water?'#00b9ff':''"
                 @click="()=>{if(isKp){this.toggleClass('water');this.$emit('classToggle','water')}}"
                 style="width: 100%">水+
      </el-button>
    </el-col>
    <el-col :span="4">
      <el-button :color="localValue.reverseWater?'#733c27':''"
                 @click="()=>{if(isKp){this.toggleClass('reverseWater');this.$emit('classToggle','reverseWater')}}"
                 style="width: 100%">水-
      </el-button>
    </el-col>
    <el-col :span="4">
      <el-button :color="localValue.wind?'#11eea7':''"
                 @click="()=>{if(isKp){this.toggleClass('wind');this.$emit('classToggle','wind')}}"
                 style="width: 100%">风+
      </el-button>
    </el-col>
    <el-col :span="4">
      <el-button :color="localValue.reverseWind?'#ff8800':''"
                 @click="()=>{if(isKp){this.toggleClass('reverseWind');this.$emit('classToggle','reverseWind')}}"
                 style="width: 100%">风-
      </el-button>
    </el-col>
  </el-row>
</template>

<script>
import DefaultBar from "@/components/bar/DefaultBar";
import {ElementClass, getText} from "@/js/elementMagic";
import {store} from "@/js/store";

export default {
  name: "ElementClassBar",
  components: {DefaultBar},
  inject: ['cardIndex', 'isKp'],
  props: {
    value: ElementClass(),
    name: String,
    valueKeyStack: Array,
    disableAutoCommit: {
      type: Boolean,
      default: false
    }
  },
  emits: ['valueChange', 'classToggle'],
  computed: {
    text() {
      return getText(this.localValue)
    }, localValue() {
      if (this.valueKeyStack != null) {
        return store.getters.cardData(this.cardIndex, this.valueKeyStack)
      } else {
        return this.value
      }
    }
  }, methods: {
    toggleClass(ele) {
      if (!this.disableAutoCommit && this.valueKeyStack != null) {
        this.commit(!this.localValue[ele], [ele])
      }
    },
    commit(data, keyStack) {
      this.$store.commit('cardData', {
        data: data,
        keyStack: [...this.valueKeyStack, ...keyStack],
        index: this.cardIndex
      })
    }
  }
}
</script>

<style scoped>

</style>
